@common-field-base: ~'ui-field-base';

.@{common-field-base} {
  width: 100%;
  display: flex;

  flex-direction: column;
  position: relative;

  &-title {
    .isRequired {
      margin-right: 4px;
      color: #ff4d4f;
      font-size: 14px;
      font-family: SimSun, sans-serif;
      line-height: 1;
    }
  }

  &-content {
    padding-top: 8px;
  }
}

.cpItem {
  position: absolute;
  z-index: 999;
  border: 1px solid;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
}

.cpTop {
  left: 50%;
  transform: translate(-50%, -50%);
}

.cpBottom {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

.cpLeft {
  top: 50%;
  transform: translate(-50%, -50%);
}

.cpRight {
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
}